import { SchemaContext, Schema, ISchema } from '@formily/react'
import { ArrayItems } from '@formily/antd'
import React from 'react'
// import { useDialogInstances } from '@designable/react'
import { ButtonSettersSchema } from '../../components/ButtonSetterSchema'

export const ButtonsSetter = () => {
  const ValidatorSchema: ISchema = {
    type: 'array',
    items: {
      type: 'object',
      'x-decorator': 'ArrayItems.Item',
      'x-decorator-props': {
        style: {
          alignItems: 'center',
          borderRadius: 3,
          paddingTop: 6,
          paddingBottom: 6,
          background: '#fff',
        },
      },
      properties: {
        sortable: {
          type: 'void',
          'x-component': 'ArrayItems.SortHandle',
          'x-component-props': { style: { marginRight: 10 } },
        },
        children: {
          type: 'string',
          'x-decorator': 'FormItem',
          'x-component': 'Input',
          'x-component-props': {
            placeholder: '按钮文字',
            style: {
              marginRight: 10,
            },
          },
        },
        drawer: {
          type: 'void',
          'x-component': 'DrawerSetter',
          'x-component-props': {
            text: '设置',
            triggerProps: {
              block: false,
            },
          },
          properties: ButtonSettersSchema,
        },

        remove: {
          type: 'void',
          'x-component': 'ArrayItems.Remove',
          'x-component-props': { style: { marginLeft: 5 } },
        },
      },
    },
    properties: {
      addButtons: {
        type: 'void',
        'x-component': 'ArrayItems.Addition',
        'x-component-props': {
          title: '添加操作按钮',
        },
      },
    },
  }
  return (
    <div style={{ marginBottom: 10, marginTop: 10 }}>
      <SchemaContext.Provider value={new Schema(ValidatorSchema)}>
        <ArrayItems />
      </SchemaContext.Provider>
    </div>
  )
}
